<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  
  <title>SpringMVC通过不同的url返回Json对象并在前端显示的解决方法 | HankChan&#39;s Blog</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="description" content="通过请求不同的url返回Json对象并在前端显示的解决方法：这是最近学习前端的一个小demo，需求是：处理三个不同url的页面中的json对象信息，让用户通过在页面选择查询类型和查询条数就可以以表格形式显示相关的Json对象信息。话不多说，上代码。    &amp;lt;html&amp;gt;    &amp;lt;head&amp;gt;    &amp;lt;meta charset=“UTF-8”&amp;gt;    &amp;lt;titl">
<meta property="og:type" content="article">
<meta property="og:title" content="SpringMVC通过不同的url返回Json对象并在前端显示的解决方法">
<meta property="og:url" content="http://hexo.hankchan.cn/2016/04/12/springmvc-e9-80-9a-e8-bf-87-e4-b8-8d-e5-90-8c-e7-9a-84url-e8-bf-94-e5-9b-9ejson-e5-af-b9-e8-b1-a1-e5-b9-b6-e5-9c-a8-e5-89-8d-e7-ab-af-e6-98-be-e7-a4-ba-e7-9a-84-e8-a7-a3-e5-86-b3-e6-96-b9-e6-b3-95/index.html">
<meta property="og:site_name" content="HankChan&#39;s Blog">
<meta property="og:description" content="通过请求不同的url返回Json对象并在前端显示的解决方法：这是最近学习前端的一个小demo，需求是：处理三个不同url的页面中的json对象信息，让用户通过在页面选择查询类型和查询条数就可以以表格形式显示相关的Json对象信息。话不多说，上代码。    &amp;lt;html&amp;gt;    &amp;lt;head&amp;gt;    &amp;lt;meta charset=“UTF-8”&amp;gt;    &amp;lt;titl">
<meta property="og:updated_time" content="2017-05-26T02:13:23.615Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="SpringMVC通过不同的url返回Json对象并在前端显示的解决方法">
<meta name="twitter:description" content="通过请求不同的url返回Json对象并在前端显示的解决方法：这是最近学习前端的一个小demo，需求是：处理三个不同url的页面中的json对象信息，让用户通过在页面选择查询类型和查询条数就可以以表格形式显示相关的Json对象信息。话不多说，上代码。    &amp;lt;html&amp;gt;    &amp;lt;head&amp;gt;    &amp;lt;meta charset=“UTF-8”&amp;gt;    &amp;lt;titl">
  
    <link rel="alternate" href="/atom.xml" title="HankChan&#39;s Blog" type="application/atom+xml">
  
  
    <link rel="icon" href="/favicon.png">
  
  
    <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
  
  <link rel="stylesheet" href="/css/style.css">
  

</head>

<body>
  <div id="container">
    <div id="wrap">
      <header id="header">
  <div id="banner"></div>
  <div id="header-outer" class="outer">
    <div id="header-title" class="inner">
      <h1 id="logo-wrap">
        <a href="/" id="logo">HankChan&#39;s Blog</a>
      </h1>
      
        <h2 id="subtitle-wrap">
          <a href="/" id="subtitle">生活就像海洋</a>
        </h2>
      
    </div>
    <div id="header-inner" class="inner">
      <nav id="main-nav">
        <a id="main-nav-toggle" class="nav-icon"></a>
        
          <a class="main-nav-link" href="/">Home</a>
        
          <a class="main-nav-link" href="/archives">Archives</a>
        
      </nav>
      <nav id="sub-nav">
        
          <a id="nav-rss-link" class="nav-icon" href="/atom.xml" title="RSS Feed"></a>
        
        <a id="nav-search-btn" class="nav-icon" title="搜索"></a>
      </nav>
      <div id="search-form-wrap">
        <form action="//google.com/search" method="get" accept-charset="UTF-8" class="search-form"><input type="search" name="q" class="search-form-input" placeholder="Search"><button type="submit" class="search-form-submit">&#xF002;</button><input type="hidden" name="sitesearch" value="http://hexo.hankchan.cn"></form>
      </div>
    </div>
  </div>
</header>
      <div class="outer">
        <section id="main"><article id="post-springmvc-e9-80-9a-e8-bf-87-e4-b8-8d-e5-90-8c-e7-9a-84url-e8-bf-94-e5-9b-9ejson-e5-af-b9-e8-b1-a1-e5-b9-b6-e5-9c-a8-e5-89-8d-e7-ab-af-e6-98-be-e7-a4-ba-e7-9a-84-e8-a7-a3-e5-86-b3-e6-96-b9-e6-b3-95" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2016/04/12/springmvc-e9-80-9a-e8-bf-87-e4-b8-8d-e5-90-8c-e7-9a-84url-e8-bf-94-e5-9b-9ejson-e5-af-b9-e8-b1-a1-e5-b9-b6-e5-9c-a8-e5-89-8d-e7-ab-af-e6-98-be-e7-a4-ba-e7-9a-84-e8-a7-a3-e5-86-b3-e6-96-b9-e6-b3-95/" class="article-date">
  <time datetime="2016-04-12T02:28:42.000Z" itemprop="datePublished">2016-04-12</time>
</a>
    
  <div class="article-category">
    <a class="article-category-link" href="/categories/未分类/">未分类</a>
  </div>

  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 class="article-title" itemprop="name">
      SpringMVC通过不同的url返回Json对象并在前端显示的解决方法
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <div id="wmd-preview-section-18" class="wmd-preview-section preview-content"><br><br>通过请求不同的url返回Json对象并在前端显示的解决方法：这是最近学习前端的一个小demo，需求是：处理三个不同url的页面中的json对象信息，让用户通过在页面选择查询类型和查询条数就可以以表格形式显示相关的Json对象信息。<br>话不多说，上代码。<br><br></div><br><div id="wmd-preview-section-19" class="wmd-preview-section preview-content"><br><br>    <span class="hljs-tag">&lt;<span class="hljs-title">html</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-title">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-title">meta</span> <span class="hljs-attribute">charset</span>=<span class="hljs-value">“UTF-8”</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-title">title</span>&gt;</span>返回JSON对象表格<span class="hljs-tag">&lt;/<span class="hljs-title">title</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">“text/javascript”</span>&gt;</span><span class="javascript"><br>        <span class="hljs-keyword">var</span> selectSuffix;<br>        <span class="hljs-keyword">var</span> list;<br>        <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">loadJsonDoc</span><span class="hljs-params">()</span>{</span><br>            getList();<br>            <span class="hljs-keyword">var</span> suffix = getSelectVal();<br>            <span class="hljs-keyword">var</span> index = location.href.lastIndexOf(<span class="hljs-string">“/“</span>);<br>            <span class="hljs-keyword">var</span> urlPrefix = location.href.substring(<span class="hljs-number">0</span>, index + <span class="hljs-number">1</span>);<br>            <span class="hljs-keyword">var</span> url = urlPrefix + suffix;<br>            <span class="hljs-keyword">var</span> xmlhttp = <span class="hljs-keyword">new</span> XMLHttpRequest();<br>            xmlhttp.onreadystatechange=<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span>{</span><br>                <span class="hljs-keyword">if</span>(xmlhttp.readyState == <span class="hljs-number">4</span> &amp;&amp; xmlhttp.status == <span class="hljs-number">200</span>){<br>                    <span class="hljs-keyword">var</span> jsonText = xmlhttp.responseText;<br>                    <span class="hljs-comment">//获取Json对象</span><br>                    JSONObject = <span class="hljs-built_in">eval</span>(<span class="hljs-string">“(“</span> + jsonText + <span class="hljs-string">“)”</span>); <span class="hljs-comment">//不使用var声明，就算再function体内，只要执行过就成为全局变量</span><br>                    <span class="hljs-comment">//根据输入条件获取参数并输出数据</span><br>                    <span class="hljs-comment">//document.getElementById(“text”).innerHTML = document.write(jsonText);</span><br>                    print(list);<br>                }<br>            }<br>            xmlhttp.open(<span class="hljs-string">“GET”</span>,url,<span class="hljs-literal">true</span>);<br>            xmlhttp.send();<br>        }<br>        <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">getList</span><span class="hljs-params">()</span>{</span><br>            list = document.getElementById(<span class="hljs-string">“recent”</span>).value;<br>            <span class="hljs-keyword">return</span> list;<br>        }<br>        <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">getSelectVal</span><span class="hljs-params">()</span>{</span><br>            selectSuffix = document.getElementById(<span class="hljs-string">“selectQuery”</span>).value;<br>            <span class="hljs-keyword">return</span> selectSuffix;<br>        }<br>        <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">print</span><span class="hljs-params">(a)</span>{</span><br>            <span class="hljs-comment">//定义获取Json对象</span><br>            document.write(<span class="hljs-string">“&lt;br&gt;&lt;a href=’success.html’&gt;返回&lt;/a&gt;”</span>);  <span class="hljs-comment">//返回查询首页</span><br>            document.write(<span class="hljs-string">“&lt;table border=’1’ cellpadding=’0’ cellpadding=’10’&gt;”</span><br>                    + <span class="hljs-string">“&lt;tr&gt;”</span><br>                    + <span class="hljs-string">“&lt;th&gt;”</span> + <span class="hljs-string">“num”</span> + <span class="hljs-string">“&lt;/th&gt;”</span><br>                    + <span class="hljs-string">“&lt;th&gt;”</span> + <span class="hljs-string">“key”</span> + <span class="hljs-string">“&lt;/th&gt;”</span><br>                    + <span class="hljs-string">“&lt;th&gt;”</span> + <span class="hljs-string">“total”</span> + <span class="hljs-string">“&lt;/th&gt;”</span><br>                    + <span class="hljs-string">“&lt;th&gt;”</span> + <span class="hljs-string">“min”</span> + <span class="hljs-string">“&lt;/th&gt;”</span><br>                    + <span class="hljs-string">“&lt;th&gt;”</span> + <span class="hljs-string">“max”</span> + <span class="hljs-string">“&lt;/th&gt;”</span><br>                    + <span class="hljs-string">“&lt;th&gt;”</span> + <span class="hljs-string">“average”</span> + <span class="hljs-string">“&lt;/th&gt;”</span><br>                    + <span class="hljs-string">“&lt;/tr&gt;”</span>);<br>            <span class="hljs-keyword">var</span> count = <span class="hljs-number">0</span>;<br>            <span class="hljs-keyword">for</span>(<span class="hljs-keyword">var</span> key <span class="hljs-keyword">in</span> JSONObject.result){  <span class="hljs-comment">//输出每个Json对象的信息</span><br>                <span class="hljs-keyword">var</span> jVals = JSONObject.result;<br>                count++;<br>                document.write(<span class="hljs-string">“&lt;tr&gt;”</span><br>                        + <span class="hljs-string">“&lt;td&gt;”</span> + count + <span class="hljs-string">“&lt;/td&gt;”</span><br>                        + <span class="hljs-string">“&lt;td&gt;”</span> + key + <span class="hljs-string">“&lt;/td&gt;”</span><br>                        + <span class="hljs-string">“&lt;td&gt;”</span> + jVals[key].total + <span class="hljs-string">“&lt;/td&gt;”</span><br>                        + <span class="hljs-string">“&lt;td&gt;”</span> + jVals[key].min + <span class="hljs-string">“&lt;/td&gt;”</span><br>                        + <span class="hljs-string">“&lt;td&gt;”</span> + jVals[key].max + <span class="hljs-string">“&lt;/td&gt;”</span><br>                        + <span class="hljs-string">“&lt;td&gt;”</span> + jVals[key].average + <span class="hljs-string">“&lt;/td&gt;”</span><br>                        + <span class="hljs-string">“&lt;/tr&gt;”</span>);<br>                <span class="hljs-keyword">if</span>(count == a){  <span class="hljs-comment">//默认输出20条数据</span><br>                    <span class="hljs-keyword">break</span>;<br>                }<br>            }<br>            document.write(<span class="hljs-string">“&lt;/table&gt;”</span>);<br><br>        }<br>    </span><span class="hljs-tag">&lt;/<span class="hljs-title">script</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-title">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-title">body</span>&gt;</span><br><br>        <span class="hljs-tag">&lt;<span class="hljs-title">h2</span>&gt;</span>Json Message<span class="hljs-tag">&lt;/<span class="hljs-title">h2</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">“text”</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-title">select</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">“selectQuery”</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-title">option</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">“all.json”</span> <span class="hljs-attribute">onclick</span>=<span class="hljs-value">“getSelectVal()”</span>&gt;</span>all<span class="hljs-tag">&lt;/<span class="hljs-title">option</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-title">option</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">“batch.json”</span> <span class="hljs-attribute">onclick</span>=<span class="hljs-value">“getSelectVal()”</span>&gt;</span>batch<span class="hljs-tag">&lt;/<span class="hljs-title">option</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-title">option</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">“image.json”</span> <span class="hljs-attribute">onclick</span>=<span class="hljs-value">“getSelectVal()”</span>&gt;</span>image<span class="hljs-tag">&lt;/<span class="hljs-title">option</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-title">select</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-title">form</span> <span class="hljs-attribute">method</span>=<span class="hljs-value">“get”</span>&gt;</span><br>            请输入查询条数: <span class="hljs-tag">&lt;<span class="hljs-title">input</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">“recent”</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">“text”</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">“recent”</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">“”</span>/&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">“submit”</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">“确认”</span> <span class="hljs-attribute">onclick</span>=<span class="hljs-value">“loadJsonDoc()”</span>/&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-title">form</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-title">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-title">html</span>&gt;</span><code>&lt;/pre&gt;
    附上三个Json的页面数据：
    all.json(已经做了格式化处理)页面如下：

    &lt;/div&gt;
    &lt;div id=&quot;wmd-preview-section-20&quot; class=&quot;wmd-preview-section preview-content&quot;&gt;
    &lt;pre class=&quot;prettyprint&quot;&gt;</code>{<br>        “<span class="hljs-attribute">elapsed</span>“: <span class="hljs-value"><span class="hljs-number">5</span></span>,<br>        “<span class="hljs-attribute">result</span>“: <span class="hljs-value">{<br>            “<span class="hljs-attribute">Batch</span>“: {<br>                “<span class="hljs-attribute">total</span>“: <span class="hljs-number">6</span>,<br>                “<span class="hljs-attribute">min</span>“: <span class="hljs-number">46</span>,<br>                “<span class="hljs-attribute">max</span>“: <span class="hljs-number">384</span>,<br>                “<span class="hljs-attribute">average</span>“: <span class="hljs-number">200</span><br>            },<br>            “<span class="hljs-attribute">Batch(1)</span>“: {<br>                “<span class="hljs-attribute">total</span>“: <span class="hljs-number">1</span>,<br>                “<span class="hljs-attribute">min</span>“: <span class="hljs-number">46</span>,<br>                “<span class="hljs-attribute">max</span>“: <span class="hljs-number">46</span>,<br>                “<span class="hljs-attribute">average</span>“: <span class="hljs-number">46</span><br>            },<br>            “<span class="hljs-attribute">Batch(2)</span>“: {<br>                “<span class="hljs-attribute">total</span>“: <span class="hljs-number">2</span>,<br>                “<span class="hljs-attribute">min</span>“: <span class="hljs-number">75</span>,<br>                “<span class="hljs-attribute">max</span>“: <span class="hljs-number">78</span>,<br>                “<span class="hljs-attribute">average</span>“: <span class="hljs-number">76</span><br>            },<br>            “<span class="hljs-attribute">Batch(20)</span>“: {<br>                “<span class="hljs-attribute">total</span>“: <span class="hljs-number">1</span>,<br>                “<span class="hljs-attribute">min</span>“: <span class="hljs-number">384</span>,<br>                “<span class="hljs-attribute">max</span>“: <span class="hljs-number">384</span>,<br>                “<span class="hljs-attribute">average</span>“: <span class="hljs-number">384</span><br>            },<br>            “<span class="hljs-attribute">Batch(24)</span>“: {<br>                “<span class="hljs-attribute">total</span>“: <span class="hljs-number">2</span>,<br>                “<span class="hljs-attribute">min</span>“: <span class="hljs-number">295</span>,<br>                “<span class="hljs-attribute">max</span>“: <span class="hljs-number">327</span>,<br>                “<span class="hljs-attribute">average</span>“: <span class="hljs-number">311</span><br>            },<br>            “<span class="hljs-attribute">BatchSlice</span>“: {<br>                “<span class="hljs-attribute">total</span>“: <span class="hljs-number">15</span>,<br>                “<span class="hljs-attribute">min</span>“: <span class="hljs-number">5</span>,<br>                “<span class="hljs-attribute">max</span>“: <span class="hljs-number">384</span>,<br>                “<span class="hljs-attribute">average</span>“: <span class="hljs-number">164</span><br>            },<br>            “<span class="hljs-attribute">BatchSlice(1)</span>“: {<br>                “<span class="hljs-attribute">total</span>“: <span class="hljs-number">5</span>,<br>                “<span class="hljs-attribute">min</span>“: <span class="hljs-number">46</span>,<br>                “<span class="hljs-attribute">max</span>“: <span class="hljs-number">78</span>,<br>                “<span class="hljs-attribute">average</span>“: <span class="hljs-number">66</span><br>            },<br>            “<span class="hljs-attribute">BatchSlice(2)</span>“: {<br>                “<span class="hljs-attribute">total</span>“: <span class="hljs-number">1</span>,<br>                “<span class="hljs-attribute">min</span>“: <span class="hljs-number">125</span>,<br>                “<span class="hljs-attribute">max</span>“: <span class="hljs-number">125</span>,<br>                “<span class="hljs-attribute">average</span>“: <span class="hljs-number">125</span><br>            },<br>            “<span class="hljs-attribute">BatchSlice(6)</span>“: {<br>                “<span class="hljs-attribute">total</span>“: <span class="hljs-number">3</span>,<br>                “<span class="hljs-attribute">min</span>“: <span class="hljs-number">360</span>,<br>                “<span class="hljs-attribute">max</span>“: <span class="hljs-number">384</span>,<br>                “<span class="hljs-attribute">average</span>“: <span class="hljs-number">370</span><br>            },<br>            “<span class="hljs-attribute">BatchSlice(8)</span>“: {<br>                “<span class="hljs-attribute">total</span>“: <span class="hljs-number">6</span>,<br>                “<span class="hljs-attribute">min</span>“: <span class="hljs-number">5</span>,<br>                “<span class="hljs-attribute">max</span>“: <span class="hljs-number">326</span>,<br>                “<span class="hljs-attribute">average</span>“: <span class="hljs-number">149</span><br>            },<br>            “<span class="hljs-attribute">Image</span>“: {<br>                “<span class="hljs-attribute">total</span>“: <span class="hljs-number">93</span>,<br>                “<span class="hljs-attribute">min</span>“: <span class="hljs-number">25</span>,<br>                “<span class="hljs-attribute">max</span>“: <span class="hljs-number">172</span>,<br>                “<span class="hljs-attribute">average</span>“: <span class="hljs-number">51</span><br>            },<br>            “<span class="hljs-attribute">Image(1536x1536)</span>“: {<br>                “<span class="hljs-attribute">total</span>“: <span class="hljs-number">3</span>,<br>                “<span class="hljs-attribute">min</span>“: <span class="hljs-number">25</span>,<br>                “<span class="hljs-attribute">max</span>“: <span class="hljs-number">37</span>,<br>                “<span class="hljs-attribute">average</span>“: <span class="hljs-number">30</span><br>            },<br>            “<span class="hljs-attribute">Image(1792x1280)</span>“: {<br>                “<span class="hljs-attribute">total</span>“: <span class="hljs-number">7</span>,<br>                “<span class="hljs-attribute">min</span>“: <span class="hljs-number">36</span>,<br>                “<span class="hljs-attribute">max</span>“: <span class="hljs-number">71</span>,<br>                “<span class="hljs-attribute">average</span>“: <span class="hljs-number">46</span><br>            },<br>            “<span class="hljs-attribute">Image(1792x1536)</span>“: {<br>                “<span class="hljs-attribute">total</span>“: <span class="hljs-number">21</span>,<br>                “<span class="hljs-attribute">min</span>“: <span class="hljs-number">26</span>,<br>                “<span class="hljs-attribute">max</span>“: <span class="hljs-number">72</span>,<br>                “<span class="hljs-attribute">average</span>“: <span class="hljs-number">45</span><br>            },<br>            “<span class="hljs-attribute">Image(2048x1280)</span>“: {<br>                “<span class="hljs-attribute">total</span>“: <span class="hljs-number">1</span>,<br>                “<span class="hljs-attribute">min</span>“: <span class="hljs-number">40</span>,<br>                “<span class="hljs-attribute">max</span>“: <span class="hljs-number">40</span>,<br>                “<span class="hljs-attribute">average</span>“: <span class="hljs-number">40</span><br>            },<br>            “<span class="hljs-attribute">Image(2048x1536)</span>“: {<br>                “<span class="hljs-attribute">total</span>“: <span class="hljs-number">43</span>,<br>                “<span class="hljs-attribute">min</span>“: <span class="hljs-number">32</span>,<br>                “<span class="hljs-attribute">max</span>“: <span class="hljs-number">172</span>,<br>                “<span class="hljs-attribute">average</span>“: <span class="hljs-number">52</span><br>            },<br>            “<span class="hljs-attribute">Image(2048x1792)</span>“: {<br>                “<span class="hljs-attribute">total</span>“: <span class="hljs-number">16</span>,<br>                “<span class="hljs-attribute">min</span>“: <span class="hljs-number">53</span>,<br>                “<span class="hljs-attribute">max</span>“: <span class="hljs-number">169</span>,<br>                “<span class="hljs-attribute">average</span>“: <span class="hljs-number">65</span><br>            },<br>            “<span class="hljs-attribute">Image(2304x1536)</span>“: {<br>                “<span class="hljs-attribute">total</span>“: <span class="hljs-number">2</span>,<br>                “<span class="hljs-attribute">min</span>“: <span class="hljs-number">50</span>,<br>                “<span class="hljs-attribute">max</span>“: <span class="hljs-number">69</span>,<br>                “<span class="hljs-attribute">average</span>“: <span class="hljs-number">59</span><br>            },<br>            “<span class="hljs-attribute">ImageSlice</span>“: {<br>                “<span class="hljs-attribute">total</span>“: <span class="hljs-number">300</span>,<br>                “<span class="hljs-attribute">min</span>“: <span class="hljs-number">0</span>,<br>                “<span class="hljs-attribute">max</span>“: <span class="hljs-number">163</span>,<br>                “<span class="hljs-attribute">average</span>“: <span class="hljs-number">35</span><br>            },<br>            “<span class="hljs-attribute">ImageSlice(1536x512)</span>“: {<br>                “<span class="hljs-attribute">total</span>“: <span class="hljs-number">9</span>,<br>                “<span class="hljs-attribute">min</span>“: <span class="hljs-number">18</span>,<br>                “<span class="hljs-attribute">max</span>“: <span class="hljs-number">35</span>,<br>                “<span class="hljs-attribute">average</span>“: <span class="hljs-number">23</span><br>            },<br>            “<span class="hljs-attribute">ImageSlice(1792x2)</span>“: {<br>                “<span class="hljs-attribute">total</span>“: <span class="hljs-number">7</span>,<br>                “<span class="hljs-attribute">min</span>“: <span class="hljs-number">0</span>,<br>                “<span class="hljs-attribute">max</span>“: <span class="hljs-number">1</span>,<br>                “<span class="hljs-attribute">average</span>“: <span class="hljs-number">0</span><br>            },<br>            “<span class="hljs-attribute">ImageSlice(1792x426)</span>“: {<br>                “<span class="hljs-attribute">total</span>“: <span class="hljs-number">21</span>,<br>                “<span class="hljs-attribute">min</span>“: <span class="hljs-number">20</span>,<br>                “<span class="hljs-attribute">max</span>“: <span class="hljs-number">55</span>,<br>                “<span class="hljs-attribute">average</span>“: <span class="hljs-number">32</span><br>            },<br>            “<span class="hljs-attribute">ImageSlice(1792x512)</span>“: {<br>                “<span class="hljs-attribute">total</span>“: <span class="hljs-number">63</span>,<br>                “<span class="hljs-attribute">min</span>“: <span class="hljs-number">21</span>,<br>                “<span class="hljs-attribute">max</span>“: <span class="hljs-number">67</span>,<br>                “<span class="hljs-attribute">average</span>“: <span class="hljs-number">32</span><br>            },<br>            “<span class="hljs-attribute">ImageSlice(2048x1)</span>“: {<br>                “<span class="hljs-attribute">total</span>“: <span class="hljs-number">16</span>,<br>                “<span class="hljs-attribute">min</span>“: <span class="hljs-number">0</span>,<br>                “<span class="hljs-attribute">max</span>“: <span class="hljs-number">22</span>,<br>                “<span class="hljs-attribute">average</span>“: <span class="hljs-number">1</span><br>            },<br>            “<span class="hljs-attribute">ImageSlice(2048x426)</span>“: {<br>                “<span class="hljs-attribute">total</span>“: <span class="hljs-number">1</span>,<br>                “<span class="hljs-attribute">min</span>“: <span class="hljs-number">34</span>,<br>                “<span class="hljs-attribute">max</span>“: <span class="hljs-number">34</span>,<br>                “<span class="hljs-attribute">average</span>“: <span class="hljs-number">34</span><br>            },<br>            “<span class="hljs-attribute">ImageSlice(2048x512)</span>“: {<br>                “<span class="hljs-attribute">total</span>“: <span class="hljs-number">129</span>,<br>                “<span class="hljs-attribute">min</span>“: <span class="hljs-number">25</span>,<br>                “<span class="hljs-attribute">max</span>“: <span class="hljs-number">156</span>,<br>                “<span class="hljs-attribute">average</span>“: <span class="hljs-number">39</span><br>            },<br>            “<span class="hljs-attribute">ImageSlice(2048x597)</span>“: {<br>                “<span class="hljs-attribute">total</span>“: <span class="hljs-number">48</span>,<br>                “<span class="hljs-attribute">min</span>“: <span class="hljs-number">29</span>,<br>                “<span class="hljs-attribute">max</span>“: <span class="hljs-number">163</span>,<br>                “<span class="hljs-attribute">average</span>“: <span class="hljs-number">47</span><br>            },<br>            “<span class="hljs-attribute">ImageSlice(2304x512)</span>“: {<br>                “<span class="hljs-attribute">total</span>“: <span class="hljs-number">6</span>,<br>                “<span class="hljs-attribute">min</span>“: <span class="hljs-number">33</span>,<br>                “<span class="hljs-attribute">max</span>“: <span class="hljs-number">59</span>,<br>                “<span class="hljs-attribute">average</span>“: <span class="hljs-number">47</span><br>            },<br>            “<span class="hljs-attribute">Row</span>“: {<br>                “<span class="hljs-attribute">total</span>“: <span class="hljs-number">172</span>,<br>                “<span class="hljs-attribute">min</span>“: <span class="hljs-number">13</span>,<br>                “<span class="hljs-attribute">max</span>“: <span class="hljs-number">53</span>,<br>                “<span class="hljs-attribute">average</span>“: <span class="hljs-number">22</span><br>            }<br>        }</span>,<br>        “<span class="hljs-attribute">command</span>“: <span class="hljs-value"><span class="hljs-string">“tail -n 500 /home/admin/logs/swift.log”</span></span>,<br>        “<span class="hljs-attribute">ok</span>“: <span class="hljs-value"><span class="hljs-literal">true</span><br>    </span>}<code>&lt;/pre&gt;
    batch.json页面如下：

    &lt;/div&gt;
    &lt;div id=&quot;wmd-preview-section-21&quot; class=&quot;wmd-preview-section preview-content&quot;&gt;
    &lt;pre class=&quot;prettyprint&quot;&gt;</code>{<br>        “<span class="hljs-attribute">elapsed</span>“: <span class="hljs-value"><span class="hljs-number">5</span></span>,<br>        “<span class="hljs-attribute">result</span>“: <span class="hljs-value">{<br>            “<span class="hljs-attribute">Batch</span>“: {<br>                “<span class="hljs-attribute">total</span>“: <span class="hljs-number">6</span>,<br>                “<span class="hljs-attribute">min</span>“: <span class="hljs-number">46</span>,<br>                “<span class="hljs-attribute">max</span>“: <span class="hljs-number">384</span>,<br>                “<span class="hljs-attribute">average</span>“: <span class="hljs-number">200</span><br>            },<br>            “<span class="hljs-attribute">Batch(1)</span>“: {<br>                “<span class="hljs-attribute">total</span>“: <span class="hljs-number">1</span>,<br>                “<span class="hljs-attribute">min</span>“: <span class="hljs-number">46</span>,<br>                “<span class="hljs-attribute">max</span>“: <span class="hljs-number">46</span>,<br>                “<span class="hljs-attribute">average</span>“: <span class="hljs-number">46</span><br>            },<br>            “<span class="hljs-attribute">Batch(2)</span>“: {<br>                “<span class="hljs-attribute">total</span>“: <span class="hljs-number">2</span>,<br>                “<span class="hljs-attribute">min</span>“: <span class="hljs-number">75</span>,<br>                “<span class="hljs-attribute">max</span>“: <span class="hljs-number">78</span>,<br>                “<span class="hljs-attribute">average</span>“: <span class="hljs-number">76</span><br>            },<br>            “<span class="hljs-attribute">Batch(20)</span>“: {<br>                “<span class="hljs-attribute">total</span>“: <span class="hljs-number">1</span>,<br>                “<span class="hljs-attribute">min</span>“: <span class="hljs-number">384</span>,<br>                “<span class="hljs-attribute">max</span>“: <span class="hljs-number">384</span>,<br>                “<span class="hljs-attribute">average</span>“: <span class="hljs-number">384</span><br>            },<br>            “<span class="hljs-attribute">Batch(24)</span>“: {<br>                “<span class="hljs-attribute">total</span>“: <span class="hljs-number">2</span>,<br>                “<span class="hljs-attribute">min</span>“: <span class="hljs-number">295</span>,<br>                “<span class="hljs-attribute">max</span>“: <span class="hljs-number">327</span>,<br>                “<span class="hljs-attribute">average</span>“: <span class="hljs-number">311</span><br>            },<br>            “<span class="hljs-attribute">BatchSlice</span>“: {<br>                “<span class="hljs-attribute">total</span>“: <span class="hljs-number">15</span>,<br>                “<span class="hljs-attribute">min</span>“: <span class="hljs-number">5</span>,<br>                “<span class="hljs-attribute">max</span>“: <span class="hljs-number">384</span>,<br>                “<span class="hljs-attribute">average</span>“: <span class="hljs-number">164</span><br>            },<br>            “<span class="hljs-attribute">BatchSlice(1)</span>“: {<br>                “<span class="hljs-attribute">total</span>“: <span class="hljs-number">5</span>,<br>                “<span class="hljs-attribute">min</span>“: <span class="hljs-number">46</span>,<br>                “<span class="hljs-attribute">max</span>“: <span class="hljs-number">78</span>,<br>                “<span class="hljs-attribute">average</span>“: <span class="hljs-number">66</span><br>            },<br>            “<span class="hljs-attribute">BatchSlice(2)</span>“: {<br>                “<span class="hljs-attribute">total</span>“: <span class="hljs-number">1</span>,<br>                “<span class="hljs-attribute">min</span>“: <span class="hljs-number">125</span>,<br>                “<span class="hljs-attribute">max</span>“: <span class="hljs-number">125</span>,<br>                “<span class="hljs-attribute">average</span>“: <span class="hljs-number">125</span><br>            },<br>            “<span class="hljs-attribute">BatchSlice(6)</span>“: {<br>                “<span class="hljs-attribute">total</span>“: <span class="hljs-number">3</span>,<br>                “<span class="hljs-attribute">min</span>“: <span class="hljs-number">360</span>,<br>                “<span class="hljs-attribute">max</span>“: <span class="hljs-number">384</span>,<br>                “<span class="hljs-attribute">average</span>“: <span class="hljs-number">370</span><br>            },<br>            “<span class="hljs-attribute">BatchSlice(8)</span>“: {<br>                “<span class="hljs-attribute">total</span>“: <span class="hljs-number">6</span>,<br>                “<span class="hljs-attribute">min</span>“: <span class="hljs-number">5</span>,<br>                “<span class="hljs-attribute">max</span>“: <span class="hljs-number">326</span>,<br>                “<span class="hljs-attribute">average</span>“: <span class="hljs-number">149</span><br>            }<br>        }</span>,<br>        “<span class="hljs-attribute">command</span>“: <span class="hljs-value"><span class="hljs-string">“tail -n 500 /home/admin/logs/swift.log”</span></span>,<br>        “<span class="hljs-attribute">ok</span>“: <span class="hljs-value"><span class="hljs-literal">true</span><br>    </span>}<code>&lt;/pre&gt;
    image.json页面如下：

    &lt;/div&gt;
    &lt;div id=&quot;wmd-preview-section-22&quot; class=&quot;wmd-preview-section preview-content&quot;&gt;
    &lt;pre class=&quot;prettyprint&quot;&gt;</code>{<br>        “<span class="hljs-attribute">elapsed</span>“: <span class="hljs-value"><span class="hljs-number">10</span></span>,<br>        “<span class="hljs-attribute">result</span>“: <span class="hljs-value">{<br>            “<span class="hljs-attribute">Image</span>“: {<br>                “<span class="hljs-attribute">total</span>“: <span class="hljs-number">93</span>,<br>                “<span class="hljs-attribute">min</span>“: <span class="hljs-number">25</span>,<br>                “<span class="hljs-attribute">max</span>“: <span class="hljs-number">172</span>,<br>                “<span class="hljs-attribute">average</span>“: <span class="hljs-number">51</span><br>            },<br>            “<span class="hljs-attribute">Image(1536x1536)</span>“: {<br>                “<span class="hljs-attribute">total</span>“: <span class="hljs-number">3</span>,<br>                “<span class="hljs-attribute">min</span>“: <span class="hljs-number">25</span>,<br>                “<span class="hljs-attribute">max</span>“: <span class="hljs-number">37</span>,<br>                “<span class="hljs-attribute">average</span>“: <span class="hljs-number">30</span><br>            },<br>            “<span class="hljs-attribute">Image(1792x1280)</span>“: {<br>                “<span class="hljs-attribute">total</span>“: <span class="hljs-number">7</span>,<br>                “<span class="hljs-attribute">min</span>“: <span class="hljs-number">36</span>,<br>                “<span class="hljs-attribute">max</span>“: <span class="hljs-number">71</span>,<br>                “<span class="hljs-attribute">average</span>“: <span class="hljs-number">46</span><br>            },<br>            “<span class="hljs-attribute">Image(1792x1536)</span>“: {<br>                “<span class="hljs-attribute">total</span>“: <span class="hljs-number">21</span>,<br>                “<span class="hljs-attribute">min</span>“: <span class="hljs-number">26</span>,<br>                “<span class="hljs-attribute">max</span>“: <span class="hljs-number">72</span>,<br>                “<span class="hljs-attribute">average</span>“: <span class="hljs-number">45</span><br>            },<br>            “<span class="hljs-attribute">Image(2048x1280)</span>“: {<br>                “<span class="hljs-attribute">total</span>“: <span class="hljs-number">1</span>,<br>                “<span class="hljs-attribute">min</span>“: <span class="hljs-number">40</span>,<br>                “<span class="hljs-attribute">max</span>“: <span class="hljs-number">40</span>,<br>                “<span class="hljs-attribute">average</span>“: <span class="hljs-number">40</span><br>            },<br>            “<span class="hljs-attribute">Image(2048x1536)</span>“: {<br>                “<span class="hljs-attribute">total</span>“: <span class="hljs-number">43</span>,<br>                “<span class="hljs-attribute">min</span>“: <span class="hljs-number">32</span>,<br>                “<span class="hljs-attribute">max</span>“: <span class="hljs-number">172</span>,<br>                “<span class="hljs-attribute">average</span>“: <span class="hljs-number">52</span><br>            },<br>            “<span class="hljs-attribute">Image(2048x1792)</span>“: {<br>                “<span class="hljs-attribute">total</span>“: <span class="hljs-number">16</span>,<br>                “<span class="hljs-attribute">min</span>“: <span class="hljs-number">53</span>,<br>                “<span class="hljs-attribute">max</span>“: <span class="hljs-number">169</span>,<br>                “<span class="hljs-attribute">average</span>“: <span class="hljs-number">65</span><br>            },<br>            “<span class="hljs-attribute">Image(2304x1536)</span>“: {<br>                “<span class="hljs-attribute">total</span>“: <span class="hljs-number">2</span>,<br>                “<span class="hljs-attribute">min</span>“: <span class="hljs-number">50</span>,<br>                “<span class="hljs-attribute">max</span>“: <span class="hljs-number">69</span>,<br>                “<span class="hljs-attribute">average</span>“: <span class="hljs-number">59</span><br>            },<br>            “<span class="hljs-attribute">ImageSlice</span>“: {<br>                “<span class="hljs-attribute">total</span>“: <span class="hljs-number">300</span>,<br>                “<span class="hljs-attribute">min</span>“: <span class="hljs-number">0</span>,<br>                “<span class="hljs-attribute">max</span>“: <span class="hljs-number">163</span>,<br>                “<span class="hljs-attribute">average</span>“: <span class="hljs-number">35</span><br>            },<br>            “<span class="hljs-attribute">ImageSlice(1536x512)</span>“: {<br>                “<span class="hljs-attribute">total</span>“: <span class="hljs-number">9</span>,<br>                “<span class="hljs-attribute">min</span>“: <span class="hljs-number">18</span>,<br>                “<span class="hljs-attribute">max</span>“: <span class="hljs-number">35</span>,<br>                “<span class="hljs-attribute">average</span>“: <span class="hljs-number">23</span><br>            },<br>            “<span class="hljs-attribute">ImageSlice(1792x2)</span>“: {<br>                “<span class="hljs-attribute">total</span>“: <span class="hljs-number">7</span>,<br>                “<span class="hljs-attribute">min</span>“: <span class="hljs-number">0</span>,<br>                “<span class="hljs-attribute">max</span>“: <span class="hljs-number">1</span>,<br>                “<span class="hljs-attribute">average</span>“: <span class="hljs-number">0</span><br>            },<br>            “<span class="hljs-attribute">ImageSlice(1792x426)</span>“: {<br>                “<span class="hljs-attribute">total</span>“: <span class="hljs-number">21</span>,<br>                “<span class="hljs-attribute">min</span>“: <span class="hljs-number">20</span>,<br>                “<span class="hljs-attribute">max</span>“: <span class="hljs-number">55</span>,<br>                “<span class="hljs-attribute">average</span>“: <span class="hljs-number">32</span><br>            },<br>            “<span class="hljs-attribute">ImageSlice(1792x512)</span>“: {<br>                “<span class="hljs-attribute">total</span>“: <span class="hljs-number">63</span>,<br>                “<span class="hljs-attribute">min</span>“: <span class="hljs-number">21</span>,<br>                “<span class="hljs-attribute">max</span>“: <span class="hljs-number">67</span>,<br>                “<span class="hljs-attribute">average</span>“: <span class="hljs-number">32</span><br>            },<br>            “<span class="hljs-attribute">ImageSlice(2048x1)</span>“: {<br>                “<span class="hljs-attribute">total</span>“: <span class="hljs-number">16</span>,<br>                “<span class="hljs-attribute">min</span>“: <span class="hljs-number">0</span>,<br>                “<span class="hljs-attribute">max</span>“: <span class="hljs-number">22</span>,<br>                “<span class="hljs-attribute">average</span>“: <span class="hljs-number">1</span><br>            },<br>            “<span class="hljs-attribute">ImageSlice(2048x426)</span>“: {<br>                “<span class="hljs-attribute">total</span>“: <span class="hljs-number">1</span>,<br>                “<span class="hljs-attribute">min</span>“: <span class="hljs-number">34</span>,<br>                “<span class="hljs-attribute">max</span>“: <span class="hljs-number">34</span>,<br>                “<span class="hljs-attribute">average</span>“: <span class="hljs-number">34</span><br>            },<br>            “<span class="hljs-attribute">ImageSlice(2048x512)</span>“: {<br>                “<span class="hljs-attribute">total</span>“: <span class="hljs-number">129</span>,<br>                “<span class="hljs-attribute">min</span>“: <span class="hljs-number">25</span>,<br>                “<span class="hljs-attribute">max</span>“: <span class="hljs-number">156</span>,<br>                “<span class="hljs-attribute">average</span>“: <span class="hljs-number">39</span><br>            },<br>            “<span class="hljs-attribute">ImageSlice(2048x597)</span>“: {<br>                “<span class="hljs-attribute">total</span>“: <span class="hljs-number">48</span>,<br>                “<span class="hljs-attribute">min</span>“: <span class="hljs-number">29</span>,<br>                “<span class="hljs-attribute">max</span>“: <span class="hljs-number">163</span>,<br>                “<span class="hljs-attribute">average</span>“: <span class="hljs-number">47</span><br>            },<br>            “<span class="hljs-attribute">ImageSlice(2304x512)</span>“: {<br>                “<span class="hljs-attribute">total</span>“: <span class="hljs-number">6</span>,<br>                “<span class="hljs-attribute">min</span>“: <span class="hljs-number">33</span>,<br>                “<span class="hljs-attribute">max</span>“: <span class="hljs-number">59</span>,<br>                “<span class="hljs-attribute">average</span>“: <span class="hljs-number">47</span><br>            }<br>        }</span>,<br>        “<span class="hljs-attribute">command</span>“: <span class="hljs-value"><span class="hljs-string">“tail -n 500 /home/admin/logs/swift.log”</span></span>,<br>        “<span class="hljs-attribute">ok</span>“: <span class="hljs-value"><span class="hljs-literal">true</span><br>    </span>}<code>&lt;/pre&gt;
    刚刚开始接触前端，比较浅薄。具体学习心得待后续再做更新。。

    ——————————–2016.04.16（周日）—————————————
    上次的这些代码是第一次写前端代码，之前从未接触，所以很粗糙。后面因为赶时间，稍作修改后就提交了，也就没有太多复杂的东西。但是是一次不错的学习体验。
    以下是后来稍作修改最后提交的html页面代码：

    &lt;/div&gt;
    &lt;div id=&quot;wmd-preview-section-23&quot; class=&quot;wmd-preview-section preview-content&quot;&gt;
    &lt;pre class=&quot;prettyprint&quot;&gt;</code>&lt;!DOCTYPE html&gt;<br>    &lt;html&gt;<br>    &lt;head&gt;<br>    &lt;meta charset=<span class="hljs-string">“UTF-8”</span>&gt;<br>    &lt;title&gt;Insert title here&lt;/title&gt;<br>    &lt;script src=<span class="hljs-string">“<a href="http://libs.baidu.com/jquery/1.10.2/jquery.min.js" target="_blank" rel="external">http://libs.baidu.com/jquery/1.10.2/jquery.min.js</a>“</span>&gt;&lt;/script&gt;<br>    &lt;script type=<span class="hljs-string">“text/javascript”</span>&gt;<br>    &lt;!– <span class="hljs-number">2016.04</span><span class="hljs-number">.13</span> <span class="hljs-number">23</span>:<span class="hljs-number">18</span> –&gt;<br>    &lt;!– 说明: 默认请求的Json页面跟本页面在同一个文件夹下, 否则需要修改相应的方法 –&gt;<br>        <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">getNum</span><span class="hljs-params">()</span>{</span><br>            <span class="hljs-keyword">var</span> num = $(<span class="hljs-string">“:text”</span>).val();<br>            <span class="hljs-keyword">return</span> num;<br>        }<br>        <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">getSelectVal</span><span class="hljs-params">()</span>{</span><br>            <span class="hljs-keyword">var</span> urlPrefix = location.href;  <span class="hljs-comment">//获取页面URL</span><br>            <span class="hljs-comment">//TODO 判断url是否以<em>.html 结尾 是则往下执行</em></span><br>            <span class="hljs-comment">/<br>            if(!urlPrefix.endsWith(“html”)){<br>                return urlPrefix + “index.html”;<br>            }<br>            <em>/</em></span><br>            <span class="hljs-keyword">var</span> substringNum = urlPrefix.lastIndexOf(<span class="hljs-string">“/“</span>); <span class="hljs-comment">//获得最后一个 / 的下标</span><br>            <span class="hljs-keyword">var</span> needPrefix = urlPrefix.substring(<span class="hljs-number">0</span>, substringNum + <span class="hljs-number">1</span>); <span class="hljs-comment">//获取最后一个(包括) / 符号之前的字符串</span><br>            <span class="hljs-keyword">var</span> suffix = $(<span class="hljs-string">“select”</span>).val(); <span class="hljs-comment">//请求页面的路径</span><br>            <span class="hljs-keyword">return</span> needPrefix + suffix;<br>        }<br>        <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">load</span><span class="hljs-params">()</span>{</span><br>            <span class="hljs-keyword">var</span> reg = <span class="hljs-keyword">new</span> RegExp(<span class="hljs-string">“^[0-9]$”</span>);<br>            <span class="hljs-keyword">if</span>(!reg.test($(<span class="hljs-string">“:text”</span>).val()) || $(<span class="hljs-string">“:text”</span>).val() == <span class="hljs-number">0</span>){<br>                alert(<span class="hljs-string">“请输入非零正整数查询!”</span>);<br>                $(<span class="hljs-string">“:text”</span>).val(<span class="hljs-string">“500”</span>);<br>                <span class="hljs-keyword">return</span>;<br>            }<br>            $.getJSON(getSelectVal(), <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(data)</span>{</span>  <span class="hljs-comment">//得到Json对象</span><br>                <span class="hljs-keyword">print</span>(getNum(), data);<br>            });<br>        }<br>        <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">print</span><span class="hljs-params">(a,obj)</span>{</span><br>            <span class="hljs-comment">//返回查询首页</span><br>            $(<span class="hljs-string">“#messageArea”</span>).html(<span class="hljs-string">“&lt;table align=’center’ border=’1’ cellpadding=’10’ cellspacing=’0’&gt;”</span><br>                    + <span class="hljs-string">“&lt;tr&gt;”</span><br>                    + <span class="hljs-string">“&lt;th&gt;”</span> + <span class="hljs-string">“num”</span> + <span class="hljs-string">“&lt;/th&gt;”</span><br>                    + <span class="hljs-string">“&lt;th&gt;”</span> + <span class="hljs-string">“key”</span> + <span class="hljs-string">“&lt;/th&gt;”</span><br>                    + <span class="hljs-string">“&lt;th&gt;”</span> + <span class="hljs-string">“total”</span> + <span class="hljs-string">“&lt;/th&gt;”</span><br>                    + <span class="hljs-string">“&lt;th&gt;”</span> + <span class="hljs-string">“min”</span> + <span class="hljs-string">“&lt;/th&gt;”</span><br>                    + <span class="hljs-string">“&lt;th&gt;”</span> + <span class="hljs-string">“max”</span> + <span class="hljs-string">“&lt;/th&gt;”</span><br>                    + <span class="hljs-string">“&lt;th&gt;”</span> + <span class="hljs-string">“average”</span> + <span class="hljs-string">“&lt;/th&gt;”</span><br>                    + <span class="hljs-string">“&lt;/tr&gt;”</span> + <span class="hljs-string">“&lt;/table&gt;”</span>);<br>            <span class="hljs-keyword">var</span> count = <span class="hljs-number">0</span>;<br>            <span class="hljs-keyword">var</span> jVals = obj.result;<br>            <span class="hljs-keyword">for</span>(key in jVals){  <span class="hljs-comment">//输出每个Json对象的信息</span><br>                count++;<br>                $(<span class="hljs-string">“table”</span>).append(<span class="hljs-string">“&lt;tr&gt;”</span><br>                        + <span class="hljs-string">“&lt;td&gt;”</span> + count + <span class="hljs-string">“&lt;/td&gt;”</span><br>                        + <span class="hljs-string">“&lt;td&gt;”</span> + key + <span class="hljs-string">“&lt;/td&gt;”</span><br>                        + <span class="hljs-string">“&lt;td&gt;”</span> + jVals[key].total + <span class="hljs-string">“&lt;/td&gt;”</span><br>                        + <span class="hljs-string">“&lt;td&gt;”</span> + jVals[key].min + <span class="hljs-string">“&lt;/td&gt;”</span><br>                        + <span class="hljs-string">“&lt;td&gt;”</span> + jVals[key].max + <span class="hljs-string">“&lt;/td&gt;”</span><br>                        + <span class="hljs-string">“&lt;td&gt;”</span> + jVals[key].average + <span class="hljs-string">“&lt;/td&gt;”</span><br>                        + <span class="hljs-string">“&lt;/tr&gt;”</span>);<br>                <span class="hljs-keyword">if</span>(count == a){<br>                    <span class="hljs-keyword">break</span>;<br>                }<br>            }<br>        }<br>    &lt;/script&gt;<br>    &lt;/head&gt;<br>    &lt;body&gt;<br>        &lt;div align=<span class="hljs-string">“center”</span>&gt;&lt;h3&gt;Json输出查询&lt;/h3&gt;&lt;/div&gt;<br>        &lt;div align=<span class="hljs-string">“center”</span>&gt;<br>        &lt;select id=<span class="hljs-string">“selectQuery”</span>&gt;<br>            &lt;option value=<span class="hljs-string">“all.json”</span>&gt;all&lt;/option&gt;<br>            &lt;option value=<span class="hljs-string">“batch.json”</span>&gt;batch&lt;/option&gt;<br>            &lt;option value=<span class="hljs-string">“image.json”</span>&gt;image&lt;/option&gt;<br>        &lt;/select&gt;<br>        请输入查询条数:&lt;input id=<span class="hljs-string">“list”</span> type=<span class="hljs-string">“text”</span> value=<span class="hljs-string">“500”</span>/&gt;<br>        &lt;input type=<span class="hljs-string">“submit”</span> value=<span class="hljs-string">“查询”</span> onclick=<span class="hljs-string">“load()”</span>/&gt;<br>        &lt;/div&gt;&lt;br&gt;&lt;br&gt;<br>        &lt;div id=<span class="hljs-string">“messageArea”</span>&gt;&lt;/div&gt;<br>    &lt;/body&gt;<br>    &lt;/html&gt;<br><br></div>
      
    </div>
    <footer class="article-footer">
      <a data-url="http://hexo.hankchan.cn/2016/04/12/springmvc-e9-80-9a-e8-bf-87-e4-b8-8d-e5-90-8c-e7-9a-84url-e8-bf-94-e5-9b-9ejson-e5-af-b9-e8-b1-a1-e5-b9-b6-e5-9c-a8-e5-89-8d-e7-ab-af-e6-98-be-e7-a4-ba-e7-9a-84-e8-a7-a3-e5-86-b3-e6-96-b9-e6-b3-95/" data-id="cj359k40b001jfwv7uqbptqt5" class="article-share-link">Share</a>
      
      
    </footer>
  </div>
  
    
<nav id="article-nav">
  
    <a href="/2016/04/22/e7-ae-80-e5-8d-95-e6-95-b4-e5-90-88springspringmvcmybatis/" id="article-nav-newer" class="article-nav-link-wrap">
      <strong class="article-nav-caption">Newer</strong>
      <div class="article-nav-title">
        
          简单整合Spring+SpringMVC+Mybatis
        
      </div>
    </a>
  
  
    <a href="/2016/04/02/eclipse-e9-85-8d-e7-bd-aemybatis-e7-9a-84xml-e6-8f-90-e7-a4-ba/" id="article-nav-older" class="article-nav-link-wrap">
      <strong class="article-nav-caption">Older</strong>
      <div class="article-nav-title">Eclipse配置mybatis的xml提示</div>
    </a>
  
</nav>

  
</article>

</section>
        
          <aside id="sidebar">
  
    
  <div class="widget-wrap">
    <h3 class="widget-title">分类</h3>
    <div class="widget">
      <ul class="category-list"><li class="category-list-item"><a class="category-list-link" href="/categories/Docker/">Docker</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/Eclipse/">Eclipse</a><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/Eclipse/Mybatis/">Mybatis</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/Eclipse/Spring/">Spring</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/Eclipse/分布式/">分布式</a></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/Git/">Git</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/Linux/">Linux</a><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/Linux/Nginx/">Nginx</a></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/Mybatis/">Mybatis</a><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/Mybatis/Spring/">Spring</a><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/Mybatis/Spring/SpringMVC/">SpringMVC</a></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/Mybatis/SpringMVC/">SpringMVC</a></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/Nginx/">Nginx</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/Spring/">Spring</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/SpringMVC/">SpringMVC</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/分布式/">分布式</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/日志管理/">日志管理</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/未分类/">未分类</a></li></ul>
    </div>
  </div>


  
    

  
    
  
    
  <div class="widget-wrap">
    <h3 class="widget-title">归档</h3>
    <div class="widget">
      <ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/archives/2017/03/">三月 2017</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2017/01/">一月 2017</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2016/10/">十月 2016</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2016/09/">九月 2016</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2016/08/">八月 2016</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2016/07/">七月 2016</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2016/06/">六月 2016</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2016/05/">五月 2016</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2016/04/">四月 2016</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2016/03/">三月 2016</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2016/02/">二月 2016</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2016/01/">一月 2016</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2015/12/">十二月 2015</a></li></ul>
    </div>
  </div>


  
    
  <div class="widget-wrap">
    <h3 class="widget-title">最新文章</h3>
    <div class="widget">
      <ul>
        
          <li>
            <a href="/2017/03/13/docker-e5-be-ae-e6-9c-8d-e5-8a-a1-e5-ae-b9-e5-99-a8-e5-8c-96-e5-bc-80-e5-8f-91-e6-8e-a2-e7-b4-a2/">Docker-微服务容器化开发探索</a>
          </li>
        
          <li>
            <a href="/2017/01/20/drds-e7-bb-93-e5-90-88mybatis-e8-a7-a3-e5-86-b3-e6-96-b9-e6-a1-88-e4-b8-8e-e8-a7-84-e8-8c-83/">DRDS结合Mybatis解决方案与规范</a>
          </li>
        
          <li>
            <a href="/2017/01/03/springmvc-thymeleaf-e5-bc-80-e5-8f-91-e6-8c-87-e5-8d-97-demo/">SpringMVC-Thymeleaf-开发指南-Demo</a>
          </li>
        
          <li>
            <a href="/2016/10/16/nginx-e4-bb-a3-e7-90-86-e6-9c-8d-e5-8a-a1-e5-99-a8-e6-96-b9-e5-bc-8f-e8-a7-a3-e5-86-b3-e5-ae-9e-e9-99-85-e5-bc-80-e5-8f-91-e4-b8-adajax-e8-af-b7-e6-b1-82-e7-9a-84-e8-b7-a8-e5-9f-9f-e9-97-ae-e9-a2-98/">Nginx代理服务器方式解决实际开发中Ajax请求的跨域问题</a>
          </li>
        
          <li>
            <a href="/2016/10/11/e5-b7-a5-e5-8e-82-e6-a8-a1-e5-bc-8f-e5-92-8c-e5-8d-95-e4-be-8b-e6-a8-a1-e5-bc-8f-e7-bb-93-e5-90-88-e5-ba-94-e7-94-a8-e7-9a-84-e5-9c-ba-e6-99-af-e6-80-9d-e8-80-83/">工厂模式和单例模式结合应用的场景思考</a>
          </li>
        
      </ul>
    </div>
  </div>

  
</aside>
        
      </div>
      <footer id="footer">
  
  <div class="outer">
    <div id="footer-info" class="inner">
      &copy; 2017 Hank Chan<br>
      Powered by <a href="http://hexo.io/" target="_blank">Hexo</a>
    </div>
  </div>
</footer>
    </div>
    <nav id="mobile-nav">
  
    <a href="/" class="mobile-nav-link">Home</a>
  
    <a href="/archives" class="mobile-nav-link">Archives</a>
  
</nav>
    

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>


  <link rel="stylesheet" href="/fancybox/jquery.fancybox.css">
  <script src="/fancybox/jquery.fancybox.pack.js"></script>


<script src="/js/script.js"></script>

  </div>
</body>
</html>